<template>
    <div class="cont">
        <div class="inp">
            <label class="iconfont icon-zhanghu"></label>
            <input type="text" placeholder="手机号码" v-model.trim="iphone">
        </div>
        <div class="inp">
            <label class="iconfont icon-mima"></label>
            <input type="text" placeholder="登录密码" v-model.trim="loginPwd">
        </div> 
        <div class="btn">
            <div class="btnText" @click="login">
                <span>登录</span>
            </div>
        </div>
    </div>
</template>
<script>
import Qs from 'qs'
import API from '../config/api_user.js'
export default {
    name: 'Passwordl',
    data () {
        return {
            iphone: 'admin',
            loginPwd: '123456'
        }
    },
    created () {
        // console.log(JSON.parse(sessionStorage.getItem('userInfo')))
        // this.iphone = sessionStorage.getItem('loginIphone');
        // this.loginPwd = sessionStorage.getItem('loginPwd');
    },
    methods: {
        login () {
            if (this.iphone != '' && this.pwd != '') {
                let params = {
                    userName: this.iphone, 
                    pwd: this.loginPwd
                }
                API.login(Qs.stringify(params)).then((res) => {
                    if (res.retCode === 0) {
                        let userInfo = {
                            loginIphone: this.iphone,
                            loginPwd: this.loginPwd,
                            page: res.page[0],
                            extraData: JSON.stringify(res.extraData),
                            timestamp: new Date().getTime()
                        };
                        sessionStorage.setItem('userInfo', JSON.stringify(userInfo)); // 将用户信息存到sessionStorage中
                        this.$router.replace({path: '/Home'}); // 登录成功跳转
                    } else if (res.retCode === 9) {
                        alert('请填写用户名或密码')
                    }
                })
            } else {
                alert('请填写用户名或密码')
            }




           
            // const reg = /^1[34578]\d{9}$/;
            // const pwdReg = /^[\w]{6,16}$/;
            // let iphone = reg.test(this.iphone)
            // let pwd = pwdReg.test(this.loginPwd)
            // if (this.iphone != '' && this.pwd != '') {
            //     const url = baseUrl + '/userservice/login'
            //     this.$axios.post(url, Qs.stringify({ 
            //         userName: this.iphone, 
            //         pwd: this.loginPwd
            //     })).then((res) => {
            //         if (res.data.retCode === 9) {
            //             alert('请填写用户名或密码')
            //         } else if (res.data.retCode === 0) {
            //             this.$router.push({
            //                 path: '/Home'
            //             })
            //             sessionStorage.setItem("loginIphone", this.iphone);
            //             sessionStorage.setItem("loginPwd", this.loginPwd);
            //             sessionStorage.setItem("token", res.data.page[0].token);
            //             sessionStorage.setItem("extraData", JSON.stringify(res.data.extraData));
            //         }
            //     })
            // }
        }
    }
}
</script>
<style scoped lang="less">
.cont{
    width: 100%;
    height: 2.666667rem;
    padding: 0 1.333333rem;
}
.inp{
    width: 100%;
    height: 1.333333rem;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    background: #fff;
    border-top: 0.1px solid #ccc;
    padding: 0 .266667rem;
    label{
        display: block;
        width: .426667rem;
        height: .426667rem;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        font-size: 16px;
        color: #ccc;
    }
    input{
        width: 5.9rem;
        height: .933333rem;
        margin-left: .2rem;
        border: none;
        outline: none;
        font-size:12px;
    }
    input::-webkit-input-placeholder{
        font-size:12px;
        font-family:ArialMT;
        color:rgba(204,204,204,1);
        line-height:14px;
        letter-spacing:1px;
    }
}
.btn{
    width: 100%;
    height: 1.28rem;
    background: #fff;
    margin-top: .613333rem;
    .btnText{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        span{
            font-size:18px;
            font-family:Arial-BoldMT;
            font-weight:normal;
            color:rgba(255,199,38,1);
            line-height:21px;
            letter-spacing:1px;
        }
    }
}
</style>
